<template>
   <img :src="musiclist.al.picUrl" class="backgroundimg">
   <div class="box">
    <div class="box1">
      <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;"
          @click="go"
        >
          <use xlink:href="#icon-zuojiantou-copy"></use>
        </svg>
        <div class="box1_2">
          <Vue3Marquee><span class="Musciname">{{musiclist.name}}</span></Vue3Marquee>
         <span class="autorname">{{musiclist.ar[0].name}}></span>
        </div>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;"
        >
          <use xlink:href="#icon-fenxiang3-copy"></use>
        </svg>
    </div>
    <div v-if="gechigo"  @click="gechiplay">
      <img src="@/assets/2.png" alt="" :class="zhangting?'show1':'show'">
      <img src="@/assets/1.png" alt="" class="img_1">
      <img :src="musiclist.al.picUrl" class="img2"  :class="zhangting?'img2paused':'img2active'">
      <!-- {img2_active:!zhangting,img2_pauesd:zhangting} -->
    </div>
    <div class="gechi" ref="gechi" v-else>
      <p v-for="(item,index) in lyric" :key="index" :class="{active:((lyric.length-1)==index)||(settime*1000>item.time&&settime*1000<lyric[index+1].time)}">{{item.lrc}}</p>
    </div>
    <div class="box2">
      <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;"
        >
          <use xlink:href="#icon-xihuan"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;"
        >
          <use xlink:href="#icon-xiazai"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 40px; height: 40px;"
        >
          <use xlink:href="#icon-agora_luzhizhong"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;"
        >
          <use xlink:href="#icon-xinxi2-copy"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;"
        >
          <use xlink:href="#icon-liebiao-"></use>
        </svg>
    </div>
    <div class="progress">
      <input type="range" min="0" :max="duration" v-model="settime" step="0.05">
    </div>
    <div class="box3">
      <svg
          class="icon"
          aria-hidden="true"
          style="width: 25px; height: 25px;"
        >
          <use xlink:href="#icon-a-shuaxinzhongxinzairu"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 25px; height: 25px;"
          @click="previous"
        >
          <use xlink:href="#icon-syg-copy"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 50px; height: 50px;"
          v-if="zhangting"
          @click="play"
        >
          <use xlink:href="#icon-bofang_o1-copy "></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 50px; height: 50px;"
          @click="play"
          v-else
        >
          <use xlink:href="#icon-zanting_o"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 25px; height: 25px;"
          @click="next"
        >
          <use xlink:href="#icon-next-copy"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 25px; height: 25px;"
        >
          <use xlink:href="#icon-danlieliebiao1-copy"></use>
        </svg>
    </div>
   </div>
</template>
<script>
import { mapState } from 'vuex';
import {getMusicgc} from '@/request/api/music'
export default {
   emits: ['getevent'],
   props:['musiclist'],
   data() {
      return {
        gechigo:true
      }
   },
   computed:{
    ...mapState(['show','zhangting','gechi','settime','playList','playListindex','duration']),
    lyric(){
      //\n
      if(this.gechi){
      let arr=this.gechi.split(/[(\r\n)\r\n]+/).map(item=>{
        let min=item.slice(1,3)
        let sec=item.slice(4,6)
        let mill=item.slice(7,10)
        let lrc=item.slice(11,item.length)
        if(isNaN(Number(mill)))
        {
         mill=item.slice(7,9)
         lrc=item.slice(10,item.length)
        }
        let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill) 
         return {min,sec,mill,lrc,time}
        
      })
      return arr
    }
    }
   },
   methods:{
      go()
      {
         this.$store.state.show=false
         this.gechigo=true
      },
      play()
      {
         this.$emit('getevent')
      },
      gechiplay()
      {
        this.gechigo=false
      },
      previous()
      {
        if(this.playListindex!=0)
        {
        getMusicgc(this.playList[this.playListindex-1].id).then(res=>{
       this.$store.commit('setgechi',res.data.lrc.lyric)
        // console.log(res.data.lrc.lyric)
      })
        this.$store.commit('setindex',(this.playListindex-1))
      }
      },
      next()
      {
       if(this.playListindex!=(this.playList.length)-1)
       {
        getMusicgc(this.playList[this.playListindex+1].id).then(res=>{
       this.$store.commit('setgechi',res.data.lrc.lyric)
        // console.log(res.data.lrc.lyric)
      })
        this.$store.commit('setindex',(this.playListindex+1))
       } 
      }
   },
   watch:{
   settime(){
    if(document.querySelector("p.active"))
    {
    let x=document.querySelector("p.active")
    if(x.offsetTop>200)
    {
      this.$refs.gechi.scrollTop=(x.offsetTop-200)
    }
   }
  }
   },
   created(){
      // console.log(this.musiclist)
   }

}
</script>
<style lang="less" scoped>
.box{
   position: relative;
   width: 100%;
   height: 100%;
   .box2{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
     position: absolute;
     bottom: 130px;
     width: 100%;
   }
   .box3{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
     position: absolute;
     bottom: 30px;
     width: 100%;
   }
}
.backgroundimg{
   width: 100%;
   height:100%;
   z-index: -1;
   position: absolute;
   filter: blur(40px);
}
.box1{
   display: flex;
   justify-content: space-between;
   .box1_2{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 240px;
      .Musciname{
         color:#F9F2EC ;
         font-size: 13px;
      }
      .autorname{
         color: #968F89;
         font-size:12px;
      }
   }
}
.img_1{
   position: absolute;
   right: 90px;
   top: 150px;
}
@keyframes rotate_ar{
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}
.img2{
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  top: 188px;
  left: 121px;
  animation:rotate_ar 10s linear infinite ;
}
.img2active{
animation-play-state: running;
}
.img2paused{
 animation-play-state: paused;
}
.show{
  //  position: absolute;
  //  width: 80px;
  //  height: 130px;
  //  right: 130px;
  //  top: 70px;
  //  z-index:1;
  position: absolute;
   width: 80px;
   height: 130px;
   right: 130px;
   top: 70px;
   z-index:1;
  transition: all 2s;
}
.show1{
   position: absolute;
   width: 80px;
   height: 130px;
   right: 130px;
   top: 70px;
   z-index:1;
   transform-origin:left top;
   transform:rotate(-20deg);
  transition: all 2s;
}
.gechi{
  width: 100%;
  height: 8rem;
  margin-top: 20px;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  color: rgb(190, 181, 181);
  p{
text-align: center;
margin-top: .3rem;
  }
}
.active{
  color: #fff;
  font-size: .4rem;
}
.progress input{
  position: absolute;
     bottom: 100px;
     width: 100%; 
     height: 3px;
}
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
</style>
